<template>
    <div>
        <a-form :form="form" layout="inline" @submit.prevent="onSubmit" :style="{marginBottom: '20px'}" id="push-search">
            <div class="push-query">
                <a-form-item>
                    <a-input placeholder="请输入相关订单或任务消息" v-decorator="['content']"/>
                </a-form-item>
                <a-form-item>
                    <a-select v-decorator="['type_id']" placeholder="请选择推送类型">
                        <a-select-option v-for="(v,k) in types" :key="k" :value="k">
                            {{v}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item >
                    <a-select v-decorator="['receive_id']" placeholder="请选择飞手">
                        <a-select-option v-for="v in pilots" :key="v.id" :value="v.id">
                            {{v.realname}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :style="{flexGrow: 1}">
                    <a-button type="primary" html-type="submit">
                        筛选
                    </a-button>
                </a-form-item>
            </div>
        </a-form>
        <a-table :columns="columns" :dataSource="tableData" rowKey="id" :pagination="pagination" bordered>
            <template slot="action" slot-scope="text, record">
                <router-link :to="'/push/update/'+record.id" v-if="menu_role.includes('/push/update')"><img src="./../../assets/images/view.svg"
                                                                  alt=""></router-link>
            </template>
        </a-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 10,
                    showQuickJumper: true,
                    onChange: (page, size) => {
                        this.handleChange(page, size)
                    },
                },
                tableData: [],
                pilots: [],
                types: [],
                search: {},
                columns: [
                    {title: '推送编号', dataIndex: 'sn', align: 'center', width: '28%'},
                    {title: '推送类型', dataIndex: 'type', align: 'center', width: '15%'},
                    {title: '推送时间', dataIndex: 'created_at', align: 'center', width: '15%'},
                    {title: '推送发出人', dataIndex: 'sender', align: 'center', width: '10%'},
                    {title: '推送接收人', dataIndex: 'receiver', align: 'center', width: '10%'},
                    {title: '操作结果', dataIndex: 'status', align: 'center', width: '15%'},
                    {title: '操作', scopedSlots: {customRender: 'action'}, align: 'center', width: '7%'},
                ],
                form: this.$form.createForm(this),
            };
        },

        mounted() {
            this.getList();
            this.http("get", "user/pilot").then(res => {
                this.pilots = res
            })
        },
        methods: {
            async getList(param = {}) {
                let req = {page_size: this.pagination.pageSize, page: this.pagination.current};
                let data = await this.http(
                    "get",
                    "push/index",
                    Object.assign(req, param)
                );
                this.tableData = data.data;
                this.types = data.types
                this.pagination.total = data.total_count;
            },
            onSubmit() {//搜索提交
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.pagination.current = 1
                        this.search = values
                        this.getList(this.search);
                    }
                })
            },
            handleChange(page, size) {
                this.pagination.current = page;
                this.pagination.pageSize = size;
                this.getList(this.search);
            },

        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./../../assets/scss/mixin";

    #push-search {
        .ant-input {
            width: 250px;
        }

        .ant-select {
            width: 180px;
        }

        .push-query {
            @include fj(flex-start);
            .ant-form-item + .ant-form-item{
                margin-left: 10px;
            }
        }
    }
</style>
